<template>
    <div>
      <el-menu
        :default-active="defaultActive"
        background-color="black"
        text-color="white"
        active-text-color="#ffd04b"
        unique-opened
        router
      >
        <el-menu-item index="/home">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu v-for="item in $store.getters.getUser.menus" :index="item.id.toString()">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.title}}</span>
          </template>
          <el-menu-item v-for="menu in item.children" :index="menu.url">{{menu.title}}</el-menu-item>
        </el-submenu>
        <!-- <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/menu">菜单管理</el-menu-item>
        <el-menu-item index="/role">角色管理</el-menu-item>
        <el-menu-item index="/admin">管理员管理</el-menu-item>
      </el-submenu> -->
      </el-menu>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        //定义默认选中状态
        defaultActive:'/home'
      };
    },
    mounted(){
      console.log(this.$store.getters.getUser);
      this.defaultActive = this.$route.path
    }
  };
  </script>
  
  <style scoped>
  .el-menu {
     /* width: 260px; */
    min-height: 600px;
  }
  </style>
  